<template>
  <div class="pad-out-box padding-top-30">
    <el-form label-width="170px" size="small" :model="searchParams" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-select v-model="searchParams.projectKeys" @change="setAssetCodeList" filterable multiple collapse-tags>
              <el-option v-for="item in projectList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产类型">
            <el-select v-model="searchParams.assetType" clearable filterable @change="setAssetCodeList('assetType')">
              <el-option v-for="item in spaceTypeList" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商铺名称">
            <el-input maxlength="200" placeholder="请输入" v-model="searchParams.shopName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产编号">
            <el-select v-model="searchParams.spaceCodeList" clearable filterable multiple collapse-tags>
              <el-option v-for="item in spaceCodeList" :key="item.shopCode" :label="item.shopNumber" :value="item.shopCode" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同名称">
            <el-input placeholder="请输入" v-model="searchParams.contractName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同文件名称">
            <el-input maxlength="200" placeholder="请输入" v-model="searchParams.fileName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编码">
            <el-input maxlength="200" placeholder="请输入" v-model="searchParams.likeContractCode" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户/供应商">
            <el-input maxlength="200" placeholder="请输入" v-model="searchParams.partnerName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同状态">
            <el-select v-model="searchParams.contractStatusList" clearable filterable multiple collapse-tags>
              <el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同开始时间">
            <el-date-picker v-model="searchParams.startTime" type="date" value-format="timestamp" :picker-options="pickerOptionsStart" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同结束时间">
            <el-date-picker v-model="searchParams.endTime" type="date" value-format="timestamp" :picker-options="pickerOptions" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" size="large" class="f-right padding-left-right-40" @click="getTableData('')">查询</el-button>
          <el-button size="large" class="f-right margin-right-10 padding-left-right-40" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <div class="border-b-line"></div>

    <div v-if="tableData.length">
      <div class="total-num-box">
        共
        <span>{{ total }}</span>
        条
      </div>
      <el-table :border="false" stripe class="new-table-style" :data="tableData">
        <el-table-column align="center" label="项目名称" prop="projectName" />
        <el-table-column align="center" label="合同名称" prop="contractName" />
        <el-table-column align="center" label="合同编号" prop="contractCode" />
        <el-table-column align="center" label="资产/事项">
          <template slot-scope="scope">
            <span>{{ scope.row.assetName }}</span
            ><br />
            <span v-if="scope.row.leaserShopName">{{ scope.row.leaserShopName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="客户/供应商" prop="partnerName" />
        <el-table-column align="center" label="合同类型" prop="status">
          <template slot-scope="scope">
            <span>{{ getContractName(scope.row.contractType) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同开始时间" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.contractBeginDate | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同结束时间" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.contractEndDate | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同状态">
          <template slot-scope="scope">
            <span>{{ getStatusName(scope.row.contractStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" prop="remark">
          <template slot-scope="scope">
            <el-button type="text" @click="goInfo(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />
    </div>
  </div>
</template>
<script>
  //contractStatus: 0 草稿 1 审批中 2 审批完成/履行中 3 驳回 4 履行完毕 5 已废止
  import { apiContrantList } from '../../../api/contract';
  import commonMixin from '../../../mixin';

  export default {
    mixins: [commonMixin],

    data() {
      return {
        searchParams: {},
        tableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1,
        isStandardList: [
          { primaryKey: 0, name: '否' },
          { primaryKey: 1, name: '是' },
        ],
      };
    },

    mounted() {
      this.getConstant();
      this.getOptionList();
      this.getProjectList();
    },

    methods: {
      //数据源
      async getTableData(type) {
        let param = {
          pageSize: this.pageSize,
          currentPage: type ? this.currentPage : 1,
          status: 1,
        };
        for (let i in this.searchParams) {
          param[i] = this.searchParams[i] === '' ? null : this.searchParams[i];
        }

        if (!param.contractStatusList || !param.contractStatusList.length) {
          param.contractStatusList = [2, 4, 5];
        }

        if (param['contractFileName'] && !param['contractName']) {
          param['contractName'] = param['contractFileName'];
        }

        param.ifContractManage = false;

        let res = await apiContrantList(param);
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },
      //分页
      pageChange(e) {
        this.currentPage = e.currentPage;
        this.pageSize = e.pageSize;
        this.getTableData('more');
      },
      //详情
      goInfo(row) {
        let url = row.contractCategory == 1 ? 'contract-info' : 'contract-manage-pay-info';
        let param = {
          contractType: row.contractType,
          contractCode: row.contractCode,
          contractKey: row.primaryKey,
          contractCategory: row.contractCategory,
          headerName: '合同管理',
        };
        let pathUrl = {
          name: url,
          query: param,
        };
        let { href } = this.$router.resolve(pathUrl);
        let windowName = 'contractManageToInfo';
        window.open(href, windowName);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .split-line {
    width: 100%;
    height: 1px;
    margin: 10px 0 30px 0;
    background: #ccc;
    float: left;
  }

  .total-num-box {
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 10px;
    color: #333;

    span {
      font-size: 16px;
      font-weight: bold;
      color: #409eff;
      margin: 0 3px;
    }
  }
</style>
